<template>
  <div class="home">
    <div class="home-left">
      <h3>PRICE:</h3>
      <p
        class="home-p"
        v-for="(item,index) in listyi.slider"
        :key="index"
        @click="onClick(index)"
      >
        {{ item.title }}
      </p>
    </div>
    <div class="home-right">
      <div class="home-col" v-for="(item,index) in resList" :key="index">
        <img :src="item.productImage" />
        <div>{{ item.productName }}</div>
        <div>{{ item.salePrice }}</div>
      </div>
    </div>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      list: [],
      listyi: [],
      lister: [],
      listsan: [],
      resList: [],
    };
  },
  mounted() {
    Promise.race([
      this.$axios.get("http://localhost:8081/data.json"),
      this.$axios.get("http://localhost:8081/data2.json"),
      this.$axios.get("http://localhost:8081/data3.json"),
    ]).then((res)=>{
      console.log(res);
    })

    this.$axios.get("./data.json").then((res) => {
      this.listyi = res.data.result;
    });
    this.$axios.get("./data2.json").then((res) => {
      this.lister = res.data.result;
    });
    this.$axios.get("./data3.json").then((res) => {
      this.listsan = res.data.result;
    });
  },
  methods: {
    onClick(index) {
      this.resList = [];
      this.list = [
        ...this.listyi.list,
        ...this.lister.list,
        ...this.listsan.list,
      ];
      this.list.forEach((element) => {
        if (
          element.salePrice <= this.listyi.slider[index].hight &&
          element.salePrice >= this.listyi.slider[index].low
        ) {
          console.log(element);
          this.resList.push(element);
        }
      });
    },
  },
  // directives: {
  //   test: {
  //     inserted: function (el, binding) {
  //       console.log(el);
  //       console.log(binding);
  //       el.onClick();
  //     },
  //   },
  // },
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 500px;
  display: flex;
  .home-left {
    width: 20%;
    height: 100%;
    background-color: rgb(196, 189, 189);
    p:hover {
      color: red;
    }
  }
  .home-right {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    overflow: scroll;
    .home-col {
      width: 24%;
      height: 300px;
      img {
        width: 80%;
        height: 70%;
      }
    }
  }
}
</style>
